<div id="cesiumContainer">
    <canvas id="cesiumCanvas"></canvas>
    <div id="cesiumCreditContainer"></div>
</div>
<script type="text/html" id="articulationTemplate">
    <div class="rowUI">
        <div class="smallHeading">articulations:</div>
        <select class="combo" data-bind="options: articulationsViewModel.articulations,
                                                  optionsText: 'name',
                                                  value: articulationsViewModel.selectedArticulation"></select>
        <div class="embeddedList" data-bind="foreach: articulationsViewModel.stages">
            <div class="smallHeading" data-bind="text: name + ':'"></div>
            <div>
                <input type="range" min="-3" max="3" step="0.01" data-bind="value: current,
                    valueUpdate: 'input',
                    attr: {
                        min: minimum,
                        max: maximum
                    }">
                <input type="text" size="2" data-bind="value: currentText">
            </div>
        </div>
    </div>
</script>
